<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="/public/js/vue.js"></script>
		<!-- 引入element样式 -->
		<link href="/public/css/element.min.css" rel="stylesheet" />
		<!-- 引入element组件库 -->
		<script src="/public/js/element.min.js"></script>
		<script src="/public/js/vue-router.js"></script>
		<script src="/public/js/axios.min.js"></script>
		<script src="/public/js/http.js"></script>
	</head>
	<body>
		<div id="loginVue" class="login">
			<div class="formVue">
				<div class="formTitle">用户登录</div>
				<el-form :model="formZc" :rules="rulesZc" ref="addZcForm" label-position="right"  :inline="true" label-width="80px">
					
					<el-form-item label="账号：" prop="account">
						<el-input size="small" v-model="formZc.account" placeholder="请输入" style="width: 320px;"></el-input>
					</el-form-item>
					<el-form-item label="密码：" prop="pwd">
						<el-input size="small" show-password v-model="formZc.pwd" placeholder="请输入" style="width: 320px;"/>
					</el-form-item>
					<div style="display: flex;justify-content: center;margin-top: 20px;flex-direction: column;align-items: center;">
						<el-button @click="submitFormZc" type="primary" style="width:80%">登录</el-button>
						<div @click="goRegister" class="loginText">去注册</div>
					</div>
				</el-form>
			</div>
		</div>
	</body>
</html>
<script>
	new Vue({
		el:'#loginVue',
		data:{
			loading_post:false,
			formZc: {},
			rulesZc: {
				account: [{
					required: true,
					message: "账号不能为空",
					trigger: "blur"
				}],
				pwd: [{
					required: true,
					message: "密码不能为空",
					trigger: "blur"
				}],
			},	
		},
		created() {
			this.resetZc()
		},
		methods: {
			//表单重置
			resetZc(){
				this.formZc = {
					account:'',
					pwd:'',
				};
				this.resetForm("addZcForm");
			},
			resetForm(refName) {
				if (this.$refs[refName]) {
					this.$refs[refName].resetFields();
				}
			},
			submitFormZc(){
				this.$refs["addZcForm"].validate(valid => {
					if (valid) {
						MyAxios.post('/api/front/appuser/login',this.formZc).then((response)=> {
							if(response.msgcode===0){
								localStorage.setItem('hunshaToken',response.data)
								this.$message({
									message: response.msg,
									type: 'success',
									duration:1500,
									onClose(){
										window.location.href='/api/front/qianduan/index'
										this.resetZc()
									},
								});
								
							}else{
								this.$message.error(response.msg);
							}
						})
						.catch(function (error) {
							this.$message.error(error);
						});
					}
				})
			},
			goRegister(){
				window.location.href="/api/front/qianduan/register"
			},
		}
	})
	</script>
<style>
	.login{
		
		height: 100vh;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.formVue{
		border: 1px solid #dbdbdb;
		border-radius: 10px;
		width: 440px;
		padding: 20px;
		background: #fff;
	}
	.formTitle{
		color: #d5bf8d;
		line-height: 32px;
		font-size: 20px;
		text-align: center;
		margin-bottom: 20px;
	}
	.loginText{text-align: center;margin-top: 10px;font-size: 14px;color: #4169e1;}
</style>